<template>
	<view class="notice">
		<view>
			<u-search shape="square" placeholder="输入标题查询" v-model="keyword" @custom="searchNotice()"
				@search="searchNotice()">
			</u-search>
		</view>
		<view class="content">
			<view v-if="noticeList.length > 0">
				<view class="list" v-for="(item,i) in noticeList" @click="detailNoticeBtn(item.id)" :key="i">
					<view class="box-content">
						<view class="left">
							<text> •&ensp;{{item.title.length > 15? item.title.substring(0, 15) + '...' : item.title}}</text>
						</view>
						<view class="right">
							{{item.createTime.substring(0, 10)}}
						</view>
					</view>
				</view>
			</view>
			<view class="no-data" v-else>
				<image :src="noImg"></image>
			</view>
			<u-gap height="20"></u-gap>
			<view class="loadmore">
				<u-loadmore :status="status"  line=true
							:loading-text="loadingText" 
							:loadmore-text="loadmoreText"
							isDot=true />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				size: 40,
				noImg: require("@/static/nodata.png"),
				keyword: '',
				noticeList: [],
				status: 'loadmore',
				loadingText: '正在加载',
				loadmoreText: '加载更多'
			}
		},
		mounted() {
			this.getNoticeList()
		},
		methods: {
			searchNotice() {
				this.current = 1
				let params = {
					params: {
						current: this.current,
						size: this.size,
						title: this.keyword
					}
				}
				this.$u.api.notice.noticeList(params).then((res) => {
					this.noticeList = [...res.data.list]
					if (this.current * this.size > this.noticeList.length) {
						this.status = 'nomore'
					}
				}).catch(e => {
					if(e.data.msg === '请先登录'){
						uni.navigateTo({
							url: '/pages/sys/login/index'
						})
					}
					if(e.data.msg === '请先认证'){
						uni.showToast({
							title: '尚未通过认证',
							icon: 'error',
							duration: 2000
						});
					}
				});
			},
			detailNoticeBtn(id) {
				uni.navigateTo({
					url: '/pagesA/notice/noticedetail?id=' + id
				})
			},
			getNoticeList() {
				let params = {
					params: {
						current: this.current,
						size: this.size,
						title: this.keyword
					}
				}
				this.$u.api.notice.noticeList(params).then((res) => {
					this.noticeList = [...this.noticeList, ...res.data.list]
					if (this.current * this.size > this.noticeList.length) {
						this.status = 'nomore'
					}
				}).catch(e => {
					if(e.data.msg === '请先登录'){
						uni.navigateTo({
							url: '/pages/sys/login/index'
						})
					}
					if(e.data.msg === '请先认证'){
						uni.showToast({
							title: '尚未通过认证',
							icon: 'error',
							duration: 2000
						});
					}
				});
			}
		},
		// 上拉加载
		onReachBottom() {
			uni.showNavigationBarLoading()
			setTimeout(() => {
				if (this.curent * this.size > this.noticeList.length) {
					uni.hideNavigationBarLoading();
					return;
				}
				this.current += 1;
				this.getNoticeList();
				uni.hideNavigationBarLoading();
			}, 500);
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新
				this.current = 1;
				this.size = 40;
				this.keyword = '';
				this.status = 'loadmore';
				this.noticeList = [];
				this.getNoticeList();
			}, 500);
		}
	}
</script>

<style scoped>
	.title {
		margin-bottom: 50rpx;
		text-align: center;
		font-size: 1.5em;
		font-weight: bold;
		color: #8D72E1;
	}

	.notice {
		margin-top: 50rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.content {
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx
	}

	.box-content {
		margin-top: 10rpx;
		width: 100%;
		display: flex;
		align-items: center;
		background: #fff;
	}

	.left {
		float: left;
		text-align: left;
		display: inline;
		font-size: 0.8em;
		font-family: 'Times New Roman', Times, serif;
		padding-top: 20rpx;
	}

	.right {
		flex: 1;
		float: right;
		text-align: right;
		display: inline;
		font-size: 24rpx;
		font-family: 'Times New Roman', Times, serif;
		color: #AAA7A7;
		padding-right: 20rpx;
	}

	.no-data {
		text-align: center;
		padding: 100rpx 0;
		color: #333;
	}

	image {
		width: 200rpx;
		height: 200rpx;
		display: block;
		margin: 0 auto;
	}
	
</style>
